import React from 'react';

class CommentBox extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef=React.createRef();
    this.handleSubmit=this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    // alert(this.myRef.current.value);
    this.props.onAddComment(this.inputRef.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form className="p-5 clearfix bg-light rounded-4" onSubmit={this.handleSubmit}>
        <div className="form-group">
          <label className="form-label fw-bold">留言内容</label>
          <input
            type="text"
            className="form-control"
            placeholder="请输入内容"
            ref={this.inputRef}
          />
        </div>
        <button type="submit" className="btn rounded-pill bg-success my-3 float-start text-white px-4">发表</button>
        <p className="float-end my-3 fw-light text-black-50">已有{this.props.commentsLength}条评论</p>
      </form>
    );
  }
}

export default CommentBox;
